<template>
	<!-- 上架 -->
	<view class="content" v-if="productList.id">
		<view style="background-color: #fff; padding: 25rpx 15rpx">
			<view class="line-view">
				<view class="line-text">任务号</view>
				<view class="line-value">{{ productList.shelfTaskNo }}</view>
			</view>

			<!-- <view v-if="productList.shelfTaskDetailDtos && productList.shelfTaskDetailDtos.length>0">
				<view class="line-view">
					<view class="line-text">仓库</view>
					<view class="line-value">
						{{ productList.shelfTaskDetailDtos[0].stockName || '---' }}
					</view>
					
				</view>
				<view class="line-view">
					<view class="line-text">库区</view>
					<view class="line-value">
						{{ productList.shelfTaskDetailDtos[0].stockAreaName || '---' }}
					</view>
				</view>
			</view> -->
		</view>

		<view style="
        position: sticky;
        top: 0;
        left: 0;
        z-index: 999;
        background-color: #fff;
        padding: 15rpx 25rpx;
      ">
			<u-subsection :list="tabList" :current="0" active-color="#217EF8" mode="subsection"
				@change="tabChange"></u-subsection>
		</view>

		<view class="line-view" style="align-items: center; padding: 25rpx; background-color: #fff" v-if="current == 1">
			<view class="line-text">
				<checkbox-group @change="doAllIn()">
					<label>
						<checkbox :checked="allIn == 1" />
						全选
					</label>
				</checkbox-group>
			</view>
			<uni-easyinput border v-model="allInbarCode" placeholder="扫描仓位以合并上架" @confirm="getStockPalacePage"
				@focus="allInbarCode = null" />
			<uni-icons type="scan" size="30" color="#cdcdcd"></uni-icons>
		</view>

		<view class="card-line" style="flex-direction: column" v-for="(item, index) of productList.shelfTaskDetailDtos"
			:key="index">
			<view class="line-view">
				<view class="line-text">物料代码</view>
				<view class="line-value">{{ item.productCode }}</view>
			</view>
			<view class="line-view">
				<view class="line-text">物料名称</view>
				<view class="line-value">{{ item.productName }}</view>
			</view>
			<view class="line-view">
				<view class="line-text">规格型号</view>
				<view class="line-value">{{ item.productModel }}</view>
			</view>
			<view class="line-view" v-if="item.auxUnitId">
				<view class="line-text">辅助单位</view>
				<view class="line-value">{{ item.auxUnitName }}</view>
			</view>
			<view class="line-view">
				<view class="line-text">来源类型</view>
				<view class="line-value">{{ item.billTypeName }}</view>
			</view>
			<view class="line-view">
				<view class="line-text">来源单号</view>
				<view class="line-value">{{ item.billNo }}</view>
			</view>
			<view class="line-view">
				<view class="line-text">默认仓位</view>
				<view class="line-value">{{ item.defaultPlaceName }}</view>
			</view>
			<view class="line-view">
				<view class="line-text">剩余数量</view>
				<view class="line-value">{{ item.remainQuality }}</view>
			</view>

			<u-line color="#c9c9c9" style="margin: 10rpx 0" />
			<view class="operate-view">
				<!-- <view class="line-view" style="align-items: center" v-if="current == 0">
					<view class="line-text">
						<checkbox-group @change="checkboxGroupChange(index)">
							<label>
								<checkbox value="1" :checked="item.checked == 1" />
								全选
							</label>
						</checkbox-group>
					</view>
					<uni-easyinput border v-model="item.scanBarCode" placeholder="为已选数据扫描仓位" @confirm="getStockPalaceAll(index)"
						@focus="item.scanBarCode = null" />
					<uni-icons type="scan" size="30" color="#cdcdcd"></uni-icons>
				</view> -->

				<!-- 物料下单个扫码 -->
				<view class="product-view" v-for="(items, indexs) of item.productList" :key="indexs">
					<view class="line-view" style="margin: 5rpx 0; align-items: center" :id="items.idName">
						<view class="line-value" style="width: 50%; color: #333; font-weight: 700">
							<checkbox-group @change="checkboxList(index, indexs)">
								<label style="display: flex">
									<checkbox value="1" :checked="items.checked == 1" />
									<text style="width: 600rpx">{{ items.barcode }}</text>
								</label>
							</checkbox-group>
						</view>
					</view>
					<view class="line-view" style="width: 100%; justify-content: flex-end">
						<view class="line-print" @click="doPrint(index, indexs)">
							打印
						</view>
					</view>
					<view class="line-view" style="align-items: center">
						数量：
						<view class="line-value">
							<uni-easyinput border type="number" v-model="items.actualQuality" placeholder="请填写数量" />
						</view>
					</view>
					<view class="line-view" v-if="item.auxUnitId" style="align-items: center">
						辅助数量：
						<view style="width: 430rpx">
							<uni-easyinput border type="number" v-model="items.auxActualQuality" placeholder="请填写辅助数量" />
							<!-- {{items.auxActualQuality}} -->
						</view>
					</view>
					<view class="line-view" style="align-items: center" v-if="current == 0">
						扫码：
						<view class="line-value">
							<uni-easyinput border v-model="items.scanBarCode" placeholder="上架仓位扫码"
								@confirm="getStockPalaceDetail(index, indexs)" @focus="items.scanBarCode = null" />
						</view>

						<!-- <view style="margin-left: 10rpx" v-if="items.stockPositionCode" @click="delThis(index, indexs)">
							<u-icon name="trash" color="#999" size="45"></u-icon>
						</view> -->
					</view>

					<view class="recommendPlace-view" v-if="
              items.recommendPlaceList && items.recommendPlaceList.length > 0
            ">
						<view class="recommendPlace-loop" v-for="(iteml, indexl) of items.recommendPlaceList" :key="indexl">
							<view class="recommendPlace-left">
								<view class="recommendPlaceLine-view">
									<view class="recommendPlaceLine-text">上架仓位</view>
									<view class="recommendPlaceLine-value">
										{{ iteml.stockPositionName }}
									</view>
								</view>
								<view class="recommendPlaceLine-view">
									<view class="recommendPlaceLine-text">上架数量</view>
									<view class="recommendPlaceLine-value">
										{{ iteml.actualQuality }}
									</view>
								</view>
							</view>
							<view class="recommendPlace-right" @click="returnThis(index, indexs, indexl)">
								<uni-icons type="undo" color="#999" size="25"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noData" v-if="productList.shelfTaskDetailDtos.length == 0">
			暂无数据
		</view>
		<view class="btn-viewShelf">
			<button type="primary" @click="billInSaveBatch">
				上架结束
			</button>
		</view>
		<div class="pagination-view">
			<uni-pagination :current="page" :total="totalElements" :show-icon="false" @change="pageChange"
				:pageSize="pageSize" style="width: 720rpx" />
		</div>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-popup v-model="popShow" mode="top">
			<view class="pop-view">
				<uni-easyinput border v-model="allInbarCode" placeholder="请扫描仓位" @confirm="getStockPalacePage"
					:focus="popShow" />
				<view v-if="allInStockList.name">
					<view class="line-view">
						<view class="line-text">仓位名称</view>
						<view class="line-value">{{ allInStockList.name }}</view>
					</view>
					<view class="line-view">
						<view class="line-text">仓位编码</view>
						<view class="line-value">{{ allInStockList.code }}</view>
					</view>
					<view class="btn-viewAllIn">
						<button type="primary" @click="allInSubmit">
							批量上架
						</button>
					</view>
				</view>
			</view>
		</u-popup>

		<blueTeethBtn></blueTeethBtn>
	</view>
	<view class="titleCenter" v-else>
		加载中...
	</view>
</template>

<script>
	var that;
	import * as bter from '@/components/printCom/bter.js';
	import * as zksdk from '@/components/printCom/bluetoolth.js';
	import blueTeethBtn from '@/components/blueTeethBtn/blueTeethBtn.vue';
	export default {
		data() {
			return {
				tabIndex: 0,
				page: 1,
				pageSize: 5,
				totalElements: 0,
				allInStockList: {},
				popShow: false,
				pageId: null,
				scanBarCode: null,
				allIn: 0,
				allInbarCode: null, //批量上架全选code
				topAllInList: {
					name: null,
					code: null,
				}, //全选扫码后展示数据
				productList: {
					shelfTaskNo: null,
					shelfTaskDetailDtos: [],
				},
				tabList: [{
						name: '未上架',
					},
					{
						name: '上架中',
					},
					{
						name: '已上架',
					},
				],
				itemStyle: {},
				current: 0,
				scrollTop: 0,
			};
		},
		onShow() {},
		onLoad(e) {
			that = this;
			uni.showLoading({
				mask: true,
				title: '请求中...',
			});
			that.pageId = e.id;
			that.getStor(that.pageId);
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onNavigationBarButtonTap() {
			that.allInStockList = {};
			that.allInbarCode = null;
			that.popShow = true;
		},
		methods: {
			doPrint(e, i) {
				const shelfTaskDetailDtos = this.productList.shelfTaskDetailDtos[e];
				const productList =
					this.productList.shelfTaskDetailDtos[e].productList[i];
				console.log(shelfTaskDetailDtos, 'shelfTaskDetailDtos');
				console.log(productList, 'productList');

				const list = {
					barcode: productList.barcode,
					productCode: shelfTaskDetailDtos.productCode,
					productName: shelfTaskDetailDtos.productName,
					productModel: shelfTaskDetailDtos.productModel,
				};
				that.writeBLECharacteristicValue(list);
			},
			// 发送二进制数据
			writeBLECharacteristicValue(obj) {
				// obj = {
				//   stackCode: '202310080002', //堆码
				//   projectNumber: 'YD230928', //项目号
				//   materialCode: 'SEW007812112', // 图号
				//   materialName: '立柱焊接T909L.2.11.2', //物料名称
				// };
				let deviceId = getApp().globalData.deviceId;
				if (!deviceId) {
					uni.showToast({
						icon: 'none',
						title: '缺少设备Id,请去蓝牙页面设置',
					});
					return;
				}
				let strCmd = zksdk.CreatCPCLPage(576, 400, 1, 0);
				strCmd += zksdk.addCPCLQRCode(340, 20, 'Q', 2, 7, obj.barcode);
				strCmd += zksdk.addCPCLText(80, 20, '7', '2', 0, obj.barcode);
				strCmd += zksdk.addCPCLText(10, 80, '7', '2', 0, '物料编码：');
				strCmd += zksdk.addCPCLText(130, 80, '7', '2', 0, obj.productCode);
				strCmd += zksdk.addCPCLText(10, 150, '7', '2', 0, '物料名称：');
				strCmd += zksdk.addCPCLText(130, 150, '7', '2', 0, obj.productName);
				strCmd += zksdk.addCPCLText(10, 220, '7', '2', 0, '规格型号：');
				strCmd += zksdk.addCPCLText(130, 220, '7', '2', 0, obj.productModel);
				// strCmd += zksdk.addCPCLText(10, 290, '7', '2', 0, obj.materialName);
				strCmd += zksdk.addCPCLGAP();
				strCmd += zksdk.addCPCLPrint();
				bter.BTER.printSomething(strCmd);
			},
			pageChange(e) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0,
				});
				that.page = e.current;
				that.getStor(that.pageId);
			},
			tabChange(e) {
				that.tabIndex = e;
				// 0未 1中 2已
				that.page = 1;
				that.formModel = [];
				that.getStor(that.pageId);
			},
			allInSubmit() {
				const param = {
					shelfTaskId: that.productList.id,
					stockId: that.allInStockList.stockId,
					stockPositionId: that.allInStockList.id,
					taskCode: that.productList.shelfTaskNo,
				};
				that.$u
					.post('/wms/mobile/api/billInSaveBatchForTaskByBackStage', param)
					.then((res) => {
						uni.showToast({
							mask: true,
							title: '上架成功',
						});
						setTimeout(function() {
							uni.navigateBack();
						}, 800);
					});
			},
			getStor(e) {
				uni.showLoading({
					mask: true,
					title: '加载中...',
				});
				var shelfStatusList = [that.tabIndex];
				this.$u
					.get('/wms/mobile/api/queryAllByDetailPage', {
						id: e,
						page: that.page - 1,
						size: that.pageSize,
						shelfStatusList,
					})
					.then((res) => {
						const list = res.data.content[0];
						for (const item of list.shelfTaskDetailDtos) {
							item.checked = 0;
							item.scanBarCode = null;
							for (const items of item.productList) {
								items.checked = 0;
								items.scanBarCode = null;
								items.stockList = {};
							}
						}
						that.productList = list;
						console.log(that.productList.shelfTaskDetailDtos.length);
						that.totalElements = res.data.totalElements;
					});
			},
			billInSaveBatch() {
				uni.showModal({
					title: '提示',
					content: '确认上架结束吗?',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								mask: true,
								title: '提交中...',
							});
							const param = {};
							param.shelfTaskId = that.productList.id;
							param.taskCode = that.productList.shelfTaskNo;
							that.$u
								.post('/wms/mobile/api/billInSaveForTaskByBackStage', param)
								.then((res) => {
									uni.showToast({
										mask: true,
										icon: 'none',
										title: '上架成功',
									});
									setTimeout(function() {
										uni.navigateBack();
									}, 800);
								});
						}
					},
				});
			},
			// 所有物料全选
			getStockPalacePage(e) {
				var list = that.$u.deepClone(that.productList);
				that.getStockPalace(e).then((res) => {
					that.allInStockList = res.data;
					// for (const item of list.shelfTaskDetailDtos) {
					// 	for (const items of item.productList) {
					// 		if (items.checked == 1) {
					// 			items.stockPositionId = res.data.id;
					// 			items.stockPositionName = res.data.name;
					// 			items.stockPositionCode = res.data.code;
					// 			items.stockId = res.data.stockId;
					// 			items.stockAreaId = res.data.stockAreaId;
					// 		}
					// 	}
					// }
					// that.productList = list;
					// that.topAllInList = res.data;
				});
			},
			// 单个物料内全选
			getStockPalaceAll(i) {
				var list = that.$u.deepClone(that.productList);
				that
					.getStockPalace(list.shelfTaskDetailDtos[i].scanBarCode)
					.then((res) => {
						for (const item of list.shelfTaskDetailDtos) {
							for (const items of item.productList) {
								if (items.checked == 1 && !items.stockPositionId) {
									items.stockPositionId = res.data.id;
									items.stockPositionName = res.data.name;
									items.stockPositionCode = res.data.code;
									items.stockId = res.data.stockId;
									items.stockAreaId = res.data.stockAreaId;
								}
							}
						}

						that.productList = list;
					});
			},
			returnThis(i, e, l) {
				uni.showModal({
					title: '提示',
					content: '是否撤销该条上架',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								mask: true,
								title: '请稍后...',
							});
							const list = that.$u.deepClone(that.productList);
							const detailDtos = list.shelfTaskDetailDtos[i];
							const product = list.shelfTaskDetailDtos[i].productList[e];
							const recommendPlaceList =
								list.shelfTaskDetailDtos[i].productList[e].recommendPlaceList[l];
							const param = {};
							param.id = detailDtos.id;
							param.barcode = detailDtos.barcode;
							param.auxQuality = recommendPlaceList.auxActualQuality;
							param.auxUnitId = detailDtos.auxUnitId;
							param.quality = recommendPlaceList.actualQuality;
							param.factoryId = detailDtos.factoryId;
							param.oldStockPositionId = recommendPlaceList.stockPositionId;
							that.$u
								.post('/wms/mobile/api/goodsDownForShelfTask', param)
								.then((res) => {
									that.getStor(that.pageId);
								});
						}
					},
				});
			},
			// 物料单扫仓位
			getStockPalaceDetail(i, e) {
				const list = that.$u.deepClone(that.productList);
				const detailDtos = list.shelfTaskDetailDtos[i];
				const product = list.shelfTaskDetailDtos[i].productList[e];
				const param = {};
				param.id = detailDtos.id;
				param.barcode = detailDtos.barcode;
				param.quality = product.actualQuality;
				param.auxQuality = product.auxActualQuality;
				param.batch = product.batch
				param.auxUnitId = detailDtos.auxUnitId;
				param.factoryId = detailDtos.factoryId;
				param.stockPositionCode = product.scanBarCode;
				param.taskCode = that.productList.shelfTaskNo;
				that.$u.post('/wms/mobile/api/goodsUpForShelfTask', param).then((res) => {
					that.getStor(that.pageId);
				});
				// var list = that.$u.deepClone(that.productList);
				// that
				//   .getStockPalace(list.shelfTaskDetailDtos[i].productList[e].scanBarCode)
				//   .then((res) => {
				//     list.shelfTaskDetailDtos[i].productList[e].stockPositionId =
				//       res.data.id;
				//     list.shelfTaskDetailDtos[i].productList[e].stockPositionName =
				//       res.data.name;
				//     list.shelfTaskDetailDtos[i].productList[e].stockPositionCode =
				//       res.data.code;
				//     list.shelfTaskDetailDtos[i].productList[e].stockId = res.data.stockId;
				//     list.shelfTaskDetailDtos[i].productList[e].stockAreaId =
				//       res.data.stockAreaId;
				//     list.shelfTaskDetailDtos[i].productList[e].checked = 1;
				//     that.productList = list;
				//   });
			},

			// 获取仓位信息
			async getStockPalace(code) {
				var Location;
				var list = that.$u.deepClone(that.productList);
				var factoryId = list.shelfTaskDetailDtos[0].factoryId;
				return new Promise((resolve, reject) => {
					this.$u
						.get('/wms/mobile/api/getStockPalace', {
							code,
							factoryId,
						})
						.then((res) => {
							Location = res;
							resolve(Location);
						});
				});
			},
			// 切换tab
			sectionChange(e) {
				this.current = e;
				var list = that.$u.deepClone(that.productList);
				for (const item of list.shelfTaskDetailDtos) {
					item.checked = e;
					for (const items of item.productList) {
						items.checked = e;
						items.stockPositionId = null;
						items.stockPositionName = null;
						items.stockPositionCode = null;
					}
					that.allIn = e;
				}
				that.productList = list;
				console.log(list);
			},
			delThis(i, e) {
				var list = that.$u.deepClone(that.productList);
				uni.showModal({
					title: '提示',
					content: '是否删除仓位信息？',
					success: function(res) {
						if (res.confirm) {
							list.shelfTaskDetailDtos[i].productList[e].stockPositionId = null;
							list.shelfTaskDetailDtos[i].productList[e].stockPositionName = null;
							list.shelfTaskDetailDtos[i].productList[e].stockPositionCode = null;
							list.shelfTaskDetailDtos[i].productList[e].checked = 0;
							list.shelfTaskDetailDtos[i].productList[e].scanBarCode = null;
							list.shelfTaskDetailDtos[i].productList[e].stockAreaId = null;
							list.shelfTaskDetailDtos[i].productList[e].stockId = null;
							list.shelfTaskDetailDtos[i].checked = 0;
						}
					},
				});
				that.productList = list;
			},
			// 批量上架全选
			doAllIn() {
				var val = that.allIn;
				var list = that.$u.deepClone(that.productList);
				if (val == 0) {
					val = 1;
				} else {
					val = 0;
				}
				for (const item of list.shelfTaskDetailDtos) {
					console.log(item);
					for (var items of item.productList) {
						console.log(items);
						items.checked = val;
					}
				}
				that.allIn = val;
				that.productList = list;
			},
			// 单选
			checkboxList(i, s) {
				var list = that.$u.deepClone(that.productList);
				var loop = list.shelfTaskDetailDtos[i].productList[s];
				if (loop.checked == 0) {
					loop.checked = 1;
				} else {
					loop.checked = 0;
				}
				var isAllIn = true;
				for (const item of list.shelfTaskDetailDtos[i].productList) {
					if (item.checked == 0) {
						isAllIn = false;
						list.shelfTaskDetailDtos[i].checked = 0;
						that.allIn = 0;
					}
				}
				if (isAllIn) {
					list.shelfTaskDetailDtos[i].checked = 1;
					that.allIn = 1;
				}
				that.productList = list;
			},
			// 全选
			checkboxGroupChange(e) {
				var list = that.$u.deepClone(that.productList);
				var loop = list.shelfTaskDetailDtos[e];
				if (loop.checked == 0) {
					loop.checked = 1;
				} else {
					loop.checked = 0;
				}
				for (const item of loop.productList) {
					item.checked = loop.checked;
				}
				that.productList = list;
			},
			// 定位到扫码code
			// position(e) {
			//   console.log(e);
			//   const list = that.productList;
			//   var idName = null;
			//   for (const item of list.shelfTaskDetailDtos) {
			//     for (const i of item.productList) {
			//       if (i.barcode == e) {
			//         idName = i.idName;
			//       }
			//     }
			//   }
			//   const query = uni.createSelectorQuery().in(this);

			//   query
			//     .select('#' + idName)
			//     .boundingClientRect((res) => {
			//       const top = res.top - 70;
			//       uni.pageScrollTo({
			//         duration: 0,
			//         scrollTop: top,
			//       });
			//     })
			//     .exec();
			// },
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
		padding-bottom: 220rpx;
	}

	.top-view {
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 25rpx 15rpx;
		border-bottom: 2rpx solid #f8f8f8;
	}

	.line-view {
		padding: 10rpx;
	}

	.card-line {
		background-color: #fff;
		padding: 10rpx 15rpx;
		margin-top: 35rpx;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
	}

	.btn-viewShelf {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 80rpx;
		padding: 25rpx 0;
		z-index: 999;

		button {
			width: 720rpx;
		}
	}

	.btn-viewAllIn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 25rpx;

		button {
			width: 720rpx;
		}
	}

	.operate-view {
		margin-bottom: 15rpx;
	}

	.product-view {
		padding: 25rpx 0;
		padding-left: 15rpx;
		border-bottom: 1rpx solid #eee;
	}

	.product-view:last-child {
		border: none;
	}

	.titleCenter {
		width: 750rpx;
		height: 100vh;
		background-color: #fff;
		padding-top: 50rpx;
		display: flex;
		justify-content: center;
	}

	.pop-view {
		padding: 25rpx;

		.line-view {
			font-size: 30rpx;
		}
	}

	.recommendPlace-view {
		font-size: 30rpx;

		.recommendPlace-loop {
			border-bottom: 1rpx solid #cdcdcd;
			width: 670rpx;
			margin: 25rpx 0 25rpx 25rpx;
			display: flex;
			align-items: center;
			padding-bottom: 10rpx;

			.recommendPlace-left {
				width: 600rpx;

				.recommendPlaceLine-view {
					display: flex;
					width: 100%;

					.recommendPlaceLine-text {
						width: 160rpx;
						color: #777;
					}

					.recommendPlaceLine-value {
						width: 420rpx;
					}
				}
			}
		}

		.recommendPlace-loop:last-of-type {
			border: none;
		}
	}

	.line-print {
		padding: 10rpx 0;
		color: #217ef8;
	}
</style>